﻿@page "/radios"
@inject IStringLocalizer<Radios> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Title"]" Name="Normal">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged"></RadioList>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction='@Localizer["Block2Intro"]' Name="Disable">
    <RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false"></RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Label">
    <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="@Localizer["RadioText"]"></RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <RadioList Items="@Items" @bind-Value="@BindRadioItem" OnSelectedChanged="@OnItemChanged"></RadioList>
        </div>
        <div class="col-12">
            Text: @BindRadioItem.Text Value: @BindRadioItem.Value
        </div>
    </div>
    <BlockLogger class="mt-3" @ref="BinderLog" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Vertical">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true"></RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Enum">
    <RadioList @bind-Value="@SelectedEnumItem"></RadioList>
    <p class="mt-2">@SelectedEnumItem</p>
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <RadioList @bind-Value="@SelectedEnumItem2" IsAutoAddNullItem="true" NullItemText="@Localizer["RadioText2"]"></RadioList>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Primary"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Success"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Danger"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Info"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Warning"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Secondary"></RadioList>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockIsButtonTitle"]" Introduction="@Localizer["BlockIsButtonIntro"]" Name="IsButton">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" IsDisabled="true" Color="Color.Danger"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Success" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Info" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
    </div>

    <ValidateForm Model="Model" class="mt-3">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <RadioList @bind-Value="@Model.Complete" IsButton="true" Items="FooItems" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
